<template>
    <div class="header">
        <h1 class="title">污染源监控系统</h1>
        <div class="right">
            <span>{{ time }}</span>
            <!-- 竖短线 -->
            <span class="divider">|</span>
            <span>{{ wea }} {{ lower }}~{{ higher }} °C</span>
            <span class="divider">|</span>
            <span>欢迎您&nbsp;</span>
            <span style="color: rgb(107, 107, 248); cursor: pointer" ref="buttonRef" v-click-outside="onClickOutside">管理员用户</span>
            <el-popover
                ref="popoverRef"
                :virtual-ref="buttonRef"
                trigger="click"
                virtual-triggering
            >
            <span style="color: rgb(107, 107, 248); cursor: pointer" @click="logout"> 退出登录 </span>
            </el-popover>
        </div>
    </div>
</template>

<script lang="ts">
import axios from 'axios';
import { defineComponent, ref, onMounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {  unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
export default defineComponent({
    name: 'Header',
    setup() {
        // 每秒跟新当前时间 yyyy/MM/dd HH:mm:ss
        const time = ref('')
        // 时间格式化函数 将时间格式化为 yyyy/MM/dd HH:mm:ss
        const formatDate = (date: Date) => {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hour = String(date.getHours()).padStart(2, '0')
            const minute = String(date.getMinutes()).padStart(2, '0')
            const second = String(date.getSeconds()).padStart(2, '0')
            return `${year}/${month}/${day} ${hour}:${minute}:${second}`
        }
        setInterval(() => {
            const date = new Date()
            time.value = formatDate(date)
        })
        let wea = ref('')
        let lower = ref('')
        let higher = ref('');
        
        onMounted(() => {
            AMapLoader.load({
                key: "32d726fcb0d8b7a864793edc78986e68", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then((AMap) => {
                    //加载天气查询插件
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getForecast('武汉市', function(err: any, data: any) {
                            wea.value = data.forecasts[0].dayWeather
                            lower.value = data.forecasts[0].nightTemp
                            higher.value = data.forecasts[0].dayTemp;

                        });
                    });
                })
                .catch((e) => {
                    console.log(e);
                });
            
        })
        const buttonRef = ref()
        const popoverRef = ref()
        const onClickOutside = () => {
          unref(popoverRef).popperRef?.delayHide?.()
        }
        let logout = ()=>{
            
        }
        return {
            time,
            wea,
            lower,
            higher,
            buttonRef,
            popoverRef,
            onClickOutside
        }
    }
})
</script>

<style lang="less">
.header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    // 下阴影
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    h1{
        display: inline-block;
        width: 60%;
        height: 100%;
        line-height: 60px;
        font-size: 24px;
    }
    .right{
        width: 600px;
        height: 100%;
        line-height: 60px;
        display: flex;
        align-items: center;
        .divider{
            display: inline-block;
            margin: 0 10px;
            padding-bottom: 2px;
        }
    }
}
</style>